<template>
  <div>
  <el-row>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-col :span="12">
      <el-card style="width:600px;height:420px">
        <span>客户订单量</span>
        <div id="main" style="width:100%;height:400px"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card style="width:600px;height:420px">
        <span>订单量和订单金额统计</span>
        <div id="order" style="width:100%;height:390px"></div>
      </el-card>
    </el-col>
  </el-row>
  <el-row style="margin-top: 50px">
    <el-col :span="12">
      <el-card style="width:600px;height:420px">
        <span>销售员销售额占比</span>
        <div id="m2" style="width:100%;height:400px"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card style="width:600px;height:420px">
        <span>工艺订单量占比</span>
        <div id="gyNum" style="width:100%;height:400px"></div>
      </el-card>
    </el-col>
  </el-row>
  </div>
</template>

<script>
    export default {
        name: "Index",
      data(){
          return{
            ordernumx:[],
            ordernumy:[],
            orderxiao:[],
            namelist:[],
            orderName: [],
            orderNum: [],
            orderList: [],
            orderPrice:[],
            gylist:[],
            gynames:[],
            orderDate:[]
          }
      },
      methods:{
        orderCount: function () {
          this.$http.get('/order/orname').then((res) => {
            if (res.data.success) {
              this.orderList = res.data.result;
              this.orderList.forEach(row => {
                this.orderNum.push(row.count);
                this.orderPrice.push(row.sum);
                this.orderDate.push(row.uptime);
              });
              var myChart = this.$echarts.init(document.getElementById('order'));
              var option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                legend: {
                  data: ['订单量', '金额销售']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: this.orderDate
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                  }
                ],
                series: [
                  {
                    name: '订单量',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: this.orderNum
                  },
                  {
                    name: '金额销售',
                    type: 'line',
                    stack: '金额',
                    areaStyle: {},
                    data: this.orderPrice
                  },
                ]
              };
              myChart.setOption(option);
            } else {
              this.$message.error(res.data.message);
            }
          })
        },
        gy:function() {
          var myChart = this.$echarts.init(document.getElementById('gyNum'));
          var option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data:this.gynames
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.gylist
              }
            ]
          }
          myChart.setOption(option);
        } ,
        xiao:function(){
          var myChart =this.$echarts.init(document.getElementById('m2'));
          var option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data:this.namelist
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '60%',
                center: ['50%', '60%'],
                data:this.orderxiao,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          myChart.setOption(option);
        },
        main:function(){
          var myChart =this.$echarts.init(document.getElementById('main'));
          var option = {
            xAxis: {
              type: 'category',
              data:this.ordernumx
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data:this.ordernumy,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              }
            }]
          };
          myChart.setOption(option);
        },
        findmain() {
            this.$http.get("/order/findmain").then(
              (res)=>{
                if(res.data.success){
                  this.ordernumx=res.data.result.xlist;
                  this.ordernumy=res.data.result.ylist;
                  this.main();
                }
              }
            );
        },
        getGyOrder() {
          this.$http.get('/order/findProOrder').then((res)=>{
            if (res.data.success) {
              this.gylist = res.data.result;
              this.gylist.forEach(row=>{
                this.gynames.push(row.name)
              })
              this.gy();
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        findxiao:function () {
          this.$http.get("/order/findxiao").then(
            (res)=>{

              if(res.data.success){
                this.orderxiao=res.data.result.xiaolist;
                this.namelist=res.data.result.namelist;
                this.xiao();
              }
            }
          );
        }
      },
      mounted() {
        this.findmain();
        this.findxiao();
        this.orderCount();
        this.getGyOrder();
      }
    }

</script>

<style scoped>

</style>
